<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>搜索详情页</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <link href="layui-v2.6.4/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="layui-v2.6.4/layui/css/modules/code.css" rel="stylesheet" type="text/css"/>
    <script charset="utf-8" src="layui-v2.6.4/layui/layui.js" type="text/javascript"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });

        function toInfo(index) {
            location.assign("tofictionInfo?name=" + searchFiction[index]);
        }
    </script>
</head>
<body>
<div class="div_top" th:replace="include/top"></div>
<div class="layui-container" style="">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>热门</legend>
    </fieldset>
    <div class="layui-row" id="searchRongqi" style="margin: 10px;">
    </div>
</div>
<script th:inline="javascript" type="text/javascript">
    var searchFiction = /*[[${fictionNames}]]*/[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var fictionTypes = /*[[${fictionTypes}]]*/[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var fictionHosts = /*[[${fictionHosts}]]*/[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var fictionData = /*[[${fictionData}]]*/[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var imges = /*[[${imges}]]*/[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var pages = /*[[${pages}]]*/3;
    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#searchRongqi', //流加载容器
            scrollElem: '#searchRongqi',
            isAuto: true,
            isLazyimg: true,
            end: '到底了哦',
            done: function (page, next) {
                setTimeout(function () {
                    var lis = [];
                    var limit = 5;
                    if (page == pages) {
                        limit = searchFiction.length - 5 * (page - 1);
                    }
                    for (var i = 0; i < limit; i++) {
                        lis.push(
                            '<div class="layui-row layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12" style="margin:10px;padding: 15px;border: 1px #00FF00 solid;">' +
                            '<img onclick="toInfo(' + eval((page - 1) * 5 + i) + ')" src="/img/fiction/' + imges[eval((page - 1) * 5 + i)] + '" style="height: 100px;" class="layui-col-lg2 layui-col-md2 layui-col-sm2 layui-col-xs2">' +
                            '<div class="layui-col-md7 layui-col-lg7 layui-col-sm7 layui-col-xs7" style="margin-left: 15px;">' +
                            '<h2>' + searchFiction[eval((page - 1) * 5 + i)] + '</h2>' +
                            '<button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">' + fictionTypes[eval((page - 1) * 5 + i)] + '</button>' +
                            '<button class="layui-btn layui-btn-primary layui-border-green layui-btn-xs">小说</button>' +
                            '<button class="layui-btn layui-btn-primary layui-border-red layui-btn-xs">热门</button><br><br>' +
                            '<p style="color: #787878;">' + fictionData[eval((page - 1) * 5 + i)] + '</p>' +
                            '</div>' +
                            '<div class="layui-col-md2 layui-col-sm2 layui-col-xs2 layui-col-lg2" style="margin-left: 20px;">' +
                            '<i>总字数:' + eval((fictionHosts[eval((page - 1) * 5 + i)] + 1) * 2) + 'w</i><br>' +
                            '<i>热度:' + fictionHosts[eval((page - 1) * 5 + i)] + '</i><br>' +
                            '<br>' +
                            '<button class="layui-btn layui-btn-danger" onclick="toInfo(' + eval((page - 1) * 5 + i) + ')">查看详情</button>' +
                            '</div>' +
                            '</div>'
                        )
                    }
                    next(lis.join(''), page < pages);
                }, 500);
            }
        });
    });
</script>
</body>
</html>
